<template>
  <div class="function-area">
    <div class="function-title-area">
      <div class="function-area-title-piece"></div>
      <div class="function-area-title">开启分销</div>
      <div class="function-area-desc">若商品价格为99元，建议分销10～30元</div>
      <div class="function-area-switch">
        <el-switch v-model="open_distribution_config.is_open_distribution"></el-switch>
      </div>
    </div>
    <el-divider></el-divider>
    <div v-if="open_distribution_config.is_open_distribution" class="content">
      <div class="condition-title">可获得佣金条件</div>
      <div class="condition">
        <div :class="{
          conditionLeftSelected: open_distribution_config.distribution_rule === 'ruleA',
          conditionLeft: open_distribution_config.distribution_rule !== 'ruleA'}" @click="distributionRule('ruleA')">
          <div>需要该买</div>
          <p>a必须先购买，分享给b，b下单，a获得分销佣金</p>
          <i v-if="open_distribution_config.distribution_rule === 'ruleA'" class="el-icon-success selected-icon"></i>
        </div>
        <div :class="{
          conditionRightSelected: open_distribution_config.distribution_rule === 'ruleB',
          conditionRight: open_distribution_config.distribution_rule !== 'ruleB'}" @click="distributionRule('ruleB')">
          <div>不需要购买</div>
          <p>不论a是否购买，分享给b，b下单，a获得分销佣金</p>
          <i v-if="open_distribution_config.distribution_rule === 'ruleB'" class="el-icon-success selected-icon"></i>
        </div>
      </div>
      <div class="amount-title">
        <span>分销金额</span>
        <span>金额区间相同时为固定金额，不同时按区间随机发放</span>
      </div>
      <div class="custom">
        <div class="custom-goods-desc">
          <span class="default-goods">商品一</span>
          <span class="default-goods-price">￥0</span>
          <span style="margin-left: 330px"><el-switch v-model="open_distribution_config.is_open_distribution"></el-switch></span>
          <p class="goods-price-desc">金额填写为0时，不启用对应等级的分销。区间设置相同，发放固定金额。</p>
          <div class="goods-row">
            <div class="grade">
              <div class="grade-title">1级分销</div>
              <div class="grant-amount">
                <div>发放金额</div>
                <div>|</div>
                <div>
                  <input v-model="open_distribution_config.one_distribution_amount.min" type="number" min="0"/>
                </div>
                <div>-</div>
                <div>
                  <input v-model="open_distribution_config.one_distribution_amount.max" type="number" min="0"/>
                </div>
              </div>
            </div>
            <div class="grade">
              <div class="grade-title">2级分销</div>
              <div class="grant-amount">
                <div>发放金额</div>
                <div>|</div>
                <div>
                  <input v-model="open_distribution_config.two_distribution_amount.min" type="number" min="0"/>
                </div>
                <div>-</div>
                <div>
                  <input v-model="open_distribution_config.two_distribution_amount.max" type="number" min="0"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DistributionConfig",
  props:['open_distribution_config'],
  data() {
    return {

    }
  },
  methods: {
    /** 选择分销规则 */
    distributionRule(val) {
      console.log('val',val)
      this.$emit('edit-distribution-rule',val);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 5px;
}

.function-area {
  margin-top: 10px;
  padding-left: 10px;
  .function-title-area {
    display: flex;
    position: relative;
    .function-area-title-piece {
      width: 5px;
      height: 30px;
      background-color: #2254f5;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .function-area-title {
      height: 40px;
      font-size: 18px;
      font-weight: bold;
      color: #2254f5;
      padding-left: 10px;
      align-content: center;
    }
    .function-area-desc {
      padding-left: 10px;
      font-size: 14px;
      align-content: center;
      color: #ff4d20;
    }
    .function-area-switch {
      width: 120px;
      align-content: center;
      text-align: right;
    }
  }
  .content {
    width: 100%;
    margin: 15px 0;
    .condition-title {
      margin: 10px 0;
      font-size: 14px;
      font-weight: bold;
    }
    .condition {
      display: flex;
      gap: 20px;
      .conditionLeft {
        width: 50%;
        padding: 10px;
        background-color: #f6f7f9;
        border: 1.5px solid #f6f7f9;
        border-radius: 5px;
        div {
          font-size: 14px;
          font-weight: bold;
        }
        p {
          font-size: 14px;
        }
      }
      .conditionLeftSelected {
        width: 50%;
        padding: 10px;
        background-color: #ecf2ff;
        border: 1.5px solid #2254f5;
        border-radius: 5px;
        position: relative;
        div {
          font-size: 14px;
          font-weight: bold;
        }
        p {
          font-size: 14px;
        }
        .selected-icon {
          color: #2254f5;
          width: 10px;
          height: 10px;
          position: absolute;
          right: 5px;
          top: 0;
        }
      }
      .conditionRight {
        width: 50%;
        padding: 10px;
        background-color: #f6f7f9;
        border: 1.5px solid #f6f7f9;
        border-radius: 5px;
        div {
          font-size: 14px;
          font-weight: bold;
        }
        p {
          font-size: 14px;
        }
      }

      .conditionRightSelected {
        width: 50%;
        padding: 10px;
        background-color: #ecf2ff;
        border: 1.5px solid #2254f5;
        border-radius: 5px;
        position: relative;
        div {
          font-size: 14px;
          font-weight: bold;
        }
        p {
          font-size: 14px;
        }
        .selected-icon {
          color: #2254f5;
          width: 10px;
          height: 10px;
          position: absolute;
          right: 5px;
          top: 0;
        }
      }
    }
    .amount-title {
      margin: 20px 0;
      span:nth-of-type(1) {
        padding-left: 10px;
        font-size: 14px;
        font-weight: bold;
      }
      span:nth-of-type(2) {
        padding-left: 10px;
        font-size: 12px;
        color: rgba(0,0,0,0.5);
      }
    }
    .custom {
      width: 100%;
      background-color: #f6f7f9;
      .custom-goods-desc {
        padding: 10px;
        .default-goods {
          font-size: 14px;
        }
        .default-goods-price {
          padding-left: 10px;
          font-size: 12px;
          color: #ff4d20;
        }
        .goods-price-desc {
          font-size: 12px;
          color: rgba(0,0,0,0.5);
        }
        .goods-row {
          margin: 20px 0;
          .grade {
            margin: 15px 0;
            display: flex;
            .grade-title {
              font-size: 14px;
              width: 60px;
              align-content: center;
            }
            .grant-amount {
              display: flex;
              border: 1px solid #c4bfbf;
              width: 380px;
              height: 30px;
              border-radius: 5px;
              div:nth-of-type(1) {
                font-size: 14px;
                width: 100px;
                text-align: center;
                align-content: center;
              }
              div:nth-of-type(2) {
                width: 10px;
                text-align: center;
                align-content: center;
              }
              div:nth-of-type(3) {
                width: 120px;
                text-align: center;
                align-content: center;
                input {
                  width: 100%;
                  height: 100%;
                  padding-left: 20px;
                  border: none;
                }
              }
              div:nth-of-type(4) {
                width: 30px;
                text-align: center;
                align-content: center;
              }
              div:nth-of-type(5) {
                width: 120px;
                text-align: center;
                align-content: center;
                input {
                  width: 100%;
                  height: 100%;
                  padding-left: 20px;
                  border: none;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
